<template>
	<view :data-theme="theme">
		<view class="fixed main_bg">
			<useNavBar :title="$t(`page.users.userCoupon.navTitle`)" :isLeft="false">
				<view slot="right" style="color:#fff" class="iconfont icon-more" @click="open"></view>
			</useNavBar>
			<view class="acea-row row-around nav">
				<template>
					<view v-for="(item, index) in navList" :key="index"
						:class="['acea-row', 'row-middle', type === item.type ? 'on' : '']">
						<text @click="setType(item.type)">{{ $t(`page.users.userCoupon.navList[${index}].name`) }}</text>
					</view>
				</template>
			</view>
		</view>
		<view class='coupon-list' v-if="couponsList.length">
			<view class='item acea-row row-center-wrapper' v-for="(item, index) in couponsList" :key="index">
				<view class='money' :class='item.isUse ? "moneyGray" : "main_bg"'>
					<view>$<text class='num'>{{ item.money ? Number(item.money) : '' }}</text></view>
					<view class="pic-num" v-if="parseFloat(item.minPrice) > 0">
						{{ $t(`page.index.couponDesc`) }}<statistic :value="item.minPrice" :currency="item.currency"/></view>
				</view>
				<view class='text'>
					<view class='condition line2'>
						<span>{{ item.name }}</span>
					</view>
					<span class="font-mini font_color"
						:class="item.validStr === 'unusable' || item.validStr === 'overdue' || item.validStr === 'notStart' ? 'bg-color-huic' : 'bg-color-check'"
						v-if="item.useType === 1">{{ $t(`page.users.userCoupon.general`) }}</span>
					<span class="font-mini font_color"
						:class="item.validStr === 'unusable' || item.validStr === 'overdue' || item.validStr === 'notStart' ? 'bg-color-huic' : 'bg-color-check'"
						v-else-if="item.useType === 2">{{ $t(`page.users.userCoupon.goods`) }}</span>
					<span class="font-mini font_color"
						:class="item.validStr === 'unusable' || item.validStr === 'overdue' || item.validStr === 'notStart' ? 'bg-color-huic' : 'bg-color-check'"
						v-else-if="item.useType === 3">{{ $t(`page.users.userCoupon.cate`) }}</span>
					<view class='data acea-row row-between-wrapper'>
						<view v-if="item.day > 0">{{ $t(`page.users.userCoupon.valid`) }} {{ item.day }}
							{{ $t(`page.users.userCoupon.day`) }}</view>
						<view v-else>{{ item.useStartTimeStr && item.useEndTimeStr ? item.useStartTimeStr + " - " +
							item.useEndTimeStr : "" }}</view>
						<view class='bnt gray' v-if="item.isUse == true">{{ $t(`page.users.userCoupon.received`) }}</view>
						<view class='bnt main_bg' v-else @click='getCoupon(item.id, index)'>
							{{ $t(`page.users.userCoupon.receive`) }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class='loadingicon acea-row row-center-wrapper'>
			<text class='loading iconfont icon-jiazai' :hidden='loading == false'></text>{{ couponsList.length ? loadTitle : '' }}
		</view>
		<view class='noCommodity' v-if="!couponsList.length && isShow && !loading">
			<view class='pictrue text-center'>
				<image src='../../../static/images/noCoupon.png'></image>
			</view>
			<text class="text-ccc">{{ $t(`page.users.userCoupon.empty`) }}</text>
		</view>
		<tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
			<user-drawer @close="closeDrawer"></user-drawer>
		</tui-drawer>
	</view>
</template>

<script>
import statistic from '@/components/statistic'
import { getCoupons, setCouponReceive } from '@/api/api.js';
import { toLogin } from '@/libs/login.js';
import { mapState } from 'pinia';
import { useAppStore } from '@/stores/app';
export default {
	components: { statistic },
	data() {
		return {
			couponsList: [],
			loading: false,
			loadend: false,
			loadTitle: this.$t('page.goodsList.more'),//提示语
			page: 1,
			limit: 20,
			isAuto: false, //没有授权的不会自动授权
			isShowAuth: false, //是否隐藏授权
			type: 1,
			isShow: false,
			navList: [{
				type: 1,
				name: '商家券',
				count: 0
			},
			{
				type: 2,
				name: '商品券',
				count: 0
			}
			],
			count: 0,
			theme: 'theme3',
			rightDrawer: false
		};
	},
	computed: mapState(useAppStore, ['isLogin']),
	watch: {
		isLogin: {
			handler: function (newV, oldV) {
				if (newV) {
					this.getUseCoupons();
				}
			},
			deep: true
		}
	},
	onLoad() {
		uni.setNavigationBarTitle({
			title: this.$t(`page.users.userCoupon.navTitle`)
		})
		if (this.isLogin) {
			this.getUseCoupons();

		} else {
			toLogin();
		}
	},
	/**
	  * 页面上拉触底事件的处理函数
	  */
	onReachBottom: function () {
		this.getUseCoupons();
	},
	methods: {
		getCoupon: function (id, index) {
			let that = this;
			let list = that.couponsList;
			let ids = [];
			ids.push(id);
			//领取优惠券
			setCouponReceive(id).then(function (res) {
				list[index].isUse = true;
				that.$set(that, 'couponsList', list);
				that.$util.Tips({ title: '领取成功' });
			}, function (res) {
				return that.$util.Tips({ title: res });
			})
		},
		/**
		  * 获取领取优惠券列表
		 */
		getUseCoupons: function () {
			let that = this
			if (that.loadend) return false;
			if (that.loading) return false;
			that.loading = true;
			getCoupons({ page: that.page, limit: that.limit, type: that.type }).then(res => {
				let list = res.data.list, loadend = list.length < that.limit;
				let couponsList = that.$util.SplitArray(list, that.couponsList);
				that.$set(that, 'couponsList', couponsList);
				that.loadend = loadend;
				that.loadTitle = loadend ? this.$t('page.goodsList.no') : this.$t('page.goodsList.more');
				that.page = that.page + 1;
				that.loading = false;
				that.isShow = true;
			}).catch(err => {
				that.loading = false;
				that.loadTitle = this.$t('page.goodsList.more');
			});
		},
		setType: function (type) {
			if (this.type !== type) {
				this.type = type;
				this.couponsList = [];
				this.page = 1;
				this.loadend = false;
				this.getUseCoupons();
			}
		},
		returns: function () {
			uni.navigateBack()
		},
		open() {
			this.rightDrawer = true
		},
		closeDrawer(e) {
			this.rightDrawer = false
			if (!e) {
				this.rightDrawer = false
			}
		},
	}
}
</script>

<style scoped lang="scss">
.fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #fff;
	z-index: 9;
}

.nav {
	width: 100%;
	height: 106rpx;
	color: #999999;
}

.nav .acea-row {
	border-top: 5rpx solid transparent;
	border-bottom: 5rpx solid transparent;
	cursor: pointer;
}

.nav .acea-row.on {
	@include tab_border_bottom(theme);
	@include main_color(theme);
}

.condition .line-title {
	width: 90rpx;
	padding: 0 10rpx;
	box-sizing: border-box;
	background: #fff;
	opacity: 1;
	border-radius: 20rpx;
	font-size: 20rpx;
	margin-right: 12rpx;
}

.condition .line-title.gray {
	border: 1px solid #BBB;
	color: #bbb;
	background-color: #F5F5F5;
}

.coupon-list {
	padding: 0 30rpx;
	margin-top: 210rpx;
}

.coupon-list .pic-num {
	color: #FFFFFF;
	font-size: 24rpx;
}

.noCommodity {
	margin-top: 210rpx;
}

.main_bg {
	@include main_bg_color(theme);
}

.select {
	@include main_color(theme);
	@include coupons_border_color(theme);
}</style>
